<template>
    <div class="com-el-tree">
      <div class="m-title"><i class="el-icon-warning-outline"></i>检验类型</div>
      <el-scrollbar style="height: 100%; width: 150px" class="el-role-tree">
        <el-tree
          :data="tree"
          @node-click="nodeClick"
          node-key="id"
          :default-expanded-keys="openKeys"
          :expand-on-click-node="false"
          style="padding: 5px 0"
        >
          <template #default="{ node, data }">
            <div class="action-group">
              <div
                class="action-text"
                :class="{
                  actived: data.id == selectId,
                  'node-text': data.parentId !== '-',
                }"
                :style="{ width: (4 - data.lv) * 18 + 150 + 'px' }"
              >
                {{ data.category }}
              </div>
            </div>
          </template>
        </el-tree>
      </el-scrollbar>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      onChange: {
        type: Function,
        default: (treeId) => {},
      },
    },
    data() {
      return {
        selectId: "",
        checked: false,
        openKeys: [],
        data: [{id:0, category:'产品', parentId : "-"},
        {id:1, category:'物料',parentId : "-"}],
        tree: [],
      };
    },
    created() {
      this.load();
    },
    methods: {
      load() {   
        let that = this;
        setTimeout(function(){ 
            that.data.forEach((x) => {
            if (x.parentId == '-') {
              x.lv = 1;
              x.children = [];
              that.tree.push(x);
              that.getTree(x.id, x);
            }
          });
          that.openKeys.push(that.tree[0].id);
          that.selectId = that.openKeys[0];
          //默认加载第一个树形菜单下面的数据
          that.$store.getters.data().treeArea.treeId = that.selectId;
          that.onChange(that.selectId);
         }, 10);     
      },
      getTree(id, data) {
        this.data.forEach((x) => {
          if (x.parentId == id) {
            x.lv = data.lv + 1;
            if (!data.children) data.children = [];
            data.children.push(x);
            this.getTree(x.id, x);
          }
        });
      },
      nodeClick(node, selected) {
        console.log(node);
        this.selectId = node.id;
        //缓存当前选中的节点
        this.$store.getters.data().treeArea.treeId = node.id;
        this.onChange(node.id);
      },
    },
  };
  </script>
  <style lang="less" scoped>
  .com-el-tree {
    display: inline-block;
    width: 210px;
    .el-role-tree {
      position: absolute;
      padding: 5px 0px;
      top: 45px;
      bottom: 0;
      border-right: 1px solid #eee;
    }
    .actived {
      color: #5884ff;
      font-size: 15px;
    }
    .action-text {
      font-size: 14px;
    }
  }
  .role-list {
    color: white;
    line-height: 44px;
    background: #1a89ff;
    padding: 0 13px;
    font-size: 16px;
    position: absolute;
    top: 2px;
    width: 210px;
  }
  .m-title {
    line-height: 40px;
    font-size: 15px;
    background: #66b1ff0f;
    font-weight: bold;
    padding: 6px 16px;
      border: 1px solid #ececec;
    i {
      padding-right: 5px;
    }
  }
  .com-el-tree ::v-deep(.el-tree-node) {
    padding: 3px 0;
  }
  .com-el-tree ::v-deep(.el-scrollbar .el-scrollbar__thumb) {
    width: 0 !important;
  }
  </style>
  